<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <link rel="stylesheet" href="css/swiper.css" />
        <link rel="stylesheet" href="css/mint.css">
    </head>
        <script src="js/serverUrl.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/mint.js"></script>
        <script src="js/moment.js"></script>
        <style type="text/css">
            .examedLabel{
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 7px;
                font-size: 3.5vw;
                color: white;
                background-color: #EF9A9A;
            }
            
            .examedItem{
                margin-left: 10px;
                margin-right: 10px;
                margin-top: 10px;
                border: 1px solid #bdbdbd;
                border-radius: 5px;
                background-color: white;
                display: flex;
                height: 16vw;
                align-items: center;
                justify-content: space-between;
            }
            .examedInfo{
                display: flex;
                flex-wrap: wrap;
                flex:1;
                margin-left: 20px;
                
            }
            .examedInfoItem{
                width: 50%;
                font-size: 3.5vw;
                color: #444444;
            }
            .answerCard{
                color: #EF9A9A;
                border: 1px solid #EF9A9A;
                padding: 4px;
                font-size: 3.5vw;
                border-radius: 3px;
                margin-right: 15px;
            }
        </style>
    <body style="background-color: #f8f8f8;">
        <div id="app">
            
            <div v-for="item in paperList" class="examedItem">
                <div class="examedInfo">
                    <div class="examedInfoItem">正确数：{{item.correct}} </div>
                    <div class="examedInfoItem">总题数：{{item.total}} </div>
                    <div style="margin-top: 2vw;" class="examedInfoItem">错误数：{{item.uncorrect}} </div>
                    <div style="margin-top: 2vw;" class="examedInfoItem">未答数：{{item.unanswer}} </div>
                </div>
                <div @click.stop="toAnswerSheet(item)" class="answerCard">答题卡</div>
            </div>
            
        
        </div>
    </body>
    
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data:{
              paperList:[]
          },
          created() {
              window.getPaperList = this.getPaperList
          },
          methods:{
              getPaperList (paperList){
                  this.paperList = paperList
              },
              toAnswerSheet(item) {
                  let params ={
                      answerUUID: item.answerUUId
                  }
                  WebViewJavascriptBridge.callHandler('toAnswerSheet',params);
              }
          }
        })
        </script>
</html>
